<!DOCTYPE html>
<html>
<head>
  <title>排行榜</title>
  <meta charset="UTF-8">
  <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
  <!-- import CSS -->
  <link rel="stylesheet" href="scoreboard.css" type="text/css">
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
  <div id="app">

        <el-dialog title="输入比赛名称" :visible.sync="dialogVisible" width="70%" :before-close="addName">
          <el-form :model="nameData" :rules="nameRules" ref="nameForm">
            <el-form-item label="比赛名称" :label-width="'80px'" prop="name">
              <el-input maxlength="30" v-model="nameData.name" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button plain type="primary" @click="addName()">确 定</el-button>
          </div>
        </el-dialog>

    <el-dialog
        title="录入成绩"
        :visible.sync="addVisible"
        width="40%"
    >
      <el-form :model="addInfo" :rules="addRules" ref="addForm">
        <el-form-item label="姓名" :label-width="'60px'" prop="name">
          <el-input maxlength="30" v-model="addInfo.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="成绩1" :label-width="'60px'" prop="s1">
          <el-input maxlength="30" v-model="addInfo.s1" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="成绩2" :label-width="'60px'" prop="s2">
          <el-input maxlength="30" v-model="addInfo.s2" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="成绩3" :label-width="'60px'" prop="s3">
          <el-input maxlength="30" v-model="addInfo.s3" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="成绩4" :label-width="'60px'" prop="s4">
          <el-input maxlength="30" v-model="addInfo.s4" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="成绩5" :label-width="'60px'" prop="s5">
          <el-input maxlength="30" v-model="addInfo.s5" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="addVisible = false">取 消</el-button>
            <el-button type="primary" @click="insertRow()">确 定</el-button>
        </span>
    </el-dialog>


    <div class="header">
        <div class="title">{{title}}</div>
        <div class="add">
            <el-button type="info" icon="el-icon-plus" circle @click="addScore()"></el-button>
        </div>
    </div>
    <div class="content">
        <div class="table">
             <el-table
                 :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
                 style="width: 100%">
                 <el-table-column
                   label="姓名"
                   prop="name">
                 </el-table-column>
                 <el-table-column
                   label="成绩"
                   prop="score">
                 </el-table-column>
                 <el-table-column
                   align="right">
                   <template slot="header" slot-scope="scope">
                     <el-input
                       v-model="search"
                       size="mini"
                       placeholder="输入关键字搜索"/>
                   </template>
                   <template slot-scope="scope">
                     <el-button
                       size="mini"
                       type="danger"
                       @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                   </template>
                 </el-table-column>
               </el-table>
        </div>
    </div>
  <body>
  <!-- import Vue before Element -->
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: function() {
        return {
            title: '',
            addVisible: false,
            dialogVisible: true,
            tableData: [],
            search: '',
            nameData: {
                name: ''
            },
            nameRules: {
                name: [{
                    required: true,
                    trigger: 'blur',
                    validator: (rule, value, callback) => {
                        if (!value) {
                            callback(new Error('名称不能为空！'));
                        }
                    }
                }]
            },
            addInfo: {
                name: '',
                s1: '',
                s2: '',
                s3: '',
                s4: '',
                s5: ''
            },
            addRules: {
                name: [{
                    required: true,
                    trigger: 'blur',
                    validator: (rule, value, callback) => {
                        if (!value) {
                            callback(new Error('姓名不能为空！'));
                        }
                    }
                }],
                s1: [{
                    required: true,
                    trigger: 'blur',
                    validator: (rule, value, callback) => {
                        if (!value) {
                            callback(new Error('成绩不能为空！'));
                        } else {
                            if (isNaN(parseFloat(value))) {
                                callback(new Error('成绩必须为一个数值!'));
                            }
                        }
                    }
                }],
                s2: [{
                    required: true,
                    trigger: 'blur',
                    validator: (rule, value, callback) => {
                        if (!value) {
                            callback(new Error('成绩不能为空！'));
                        } else {
                            if (isNaN(parseFloat(value))) {
                                callback(new Error('成绩必须为一个数值!'));
                            }
                        }
                    }
                }],
                s3: [{
                    required: true,
                    trigger: 'blur',
                    validator: (rule, value, callback) => {
                        if (!value) {
                            callback(new Error('成绩不能为空！'));
                        } else {
                            if (isNaN(parseFloat(value))) {
                                callback(new Error('成绩必须为一个数值!'));
                            }
                        }

                    }
                }],
                s4: [{
                    required: true,
                    trigger: 'blur',
                    validator: (rule, value, callback) => {
                        if (!value) {
                            callback(new Error('成绩不能为空！'));
                        } else {
                            if (isNaN(parseFloat(value))) {
                                callback(new Error('成绩必须为一个数值!'));
                            }
                        }

                    }
                }],
                s5: [{
                    required: true,
                    trigger: 'blur',
                    validator: (rule, value, callback) => {
                        if (!value) {
                            callback(new Error('成绩不能为空！'));
                        } else {
                            if (isNaN(parseFloat(value))) {
                                callback(new Error('成绩必须为一个数值!'));
                            }
                        }

                    }
                }],
            }
        }
      },
      methods: {   
          handleDelete(index, row) {
              this.tableData.splice(index, 1);
          }, 
          addName() {
              if (!this.nameData.name) {
                  this.$message.error('您输入的信息有误!');
              } else {
                  this.title = this.nameData.name;
                  this.dialogVisible = false;
              }
          },
          addScore() {
              this.addInfo.s1 = '';
              this.addInfo.s2 = '';
              this.addInfo.s3 = '';
              this.addInfo.s4 = '';
              this.addInfo.s5 = '';
              this.addInfo.name = '';
              this.addVisible = true;
          },
          insertRow() {
              console.log("in1");
              let t_name = this.addInfo.name;
              let s = [];

              if (!this.addInfo.name || !this.addInfo.s1 ||!this.addInfo.s2 ||!this.addInfo.s3 ||!this.addInfo.s4 ||!this.addInfo.s5) {
                  this.$message.error('您输入的信息有误!');
              } else {
                  s[0] = parseFloat(this.addInfo.s1);
                  s[1] = parseFloat(this.addInfo.s2);
                  s[2] = parseFloat(this.addInfo.s3);
                  s[3] = parseFloat(this.addInfo.s4);
                  s[4] = parseFloat(this.addInfo.s5);

                  let flag = false;
                  for (t in s) {
                      if (isNaN(t)) {
                          flag = true;
                          break;
                      }
                  }

                  s.sort((a, b) => { return a - b; });
                  if (!flag) {
                      this.tableData.push({
                          name: this.addInfo.name,
                          score: ((s[1] + s[2] + s[3]) / 3).toFixed(2)
                      });
                      this.tableData.sort((a, b) => { return a.score - b.score;});
                      this.addVisible = false;
                  } else {
                      this.$message.error("您输入的信息有误!");
                  }
              }
          }
      } 
    })
  </script>
</html>